<template>
    <div class="body">
        <div class="title-div">
            <el-tabs type="border-card" style="width: 1590px">
                <el-tab-pane label="用户管理" style="font-family: 微软雅黑;font-size:18px">
                    <div class="head">
                        <el-button @click="dialogFormVisible = true">添加员工</el-button>
                        <el-dialog title="添加员工" :visible.sync="dialogFormVisible">
                            <el-form :model="staff">
                                <el-form-item label="登陆账号" :label-width="formLabelWidth">
                                    <el-input v-model="staff.clerkAccountNumber" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="登陆密码" :label-width="formLabelWidth">
                                    <el-input v-model="staff.clerkPassword" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="姓名" :label-width="formLabelWidth">
                                    <el-input v-model="staff.clerkName" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="角色" :label-width="formLabelWidth">
                                    <el-select v-model="staff.roleId" placeholder="请选择角色">
                                        <el-option label="服务员" value="shanghai"></el-option>
                                        <el-option label="经理" value="beijing"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="年龄" :label-width="formLabelWidth">
                                    <el-input v-model="staff.clerkAge" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="性别" :label-width="formLabelWidth">
                                    <el-input v-model="staff.clerkSex" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="员工住址" :label-width="formLabelWidth">
                                    <el-input v-model="staff.clerkAddress" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="联系方式" :label-width="formLabelWidth">
                                    <el-input v-model="staff.clerkPhone" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                    <div class="list">
                        <el-table
                                :data="tableData"
                                stripe
                                style="width: 100%">
                            <el-table-column
                                    prop="clerkId"
                                    label="编号"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="clerkName"
                                    label="姓名"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="roleId"
                                    label="角色"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="clerkAge"
                                    label="年龄">
                            </el-table-column>
                            <el-table-column
                                    prop="clerkSex"
                                    label="性别">
                            </el-table-column>
                            <el-table-column
                                    prop="clerkAddress"
                                    label="员工住址">
                            </el-table-column>
                            <el-table-column
                                    prop="clerkPhone"
                                    label="联系方式">
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini"
                                            @click="dialogs= true">编辑
                                    </el-button>
                                    <el-dialog title="修改信息" :visible.sync="dialogs">
                                        <ul>
                                            <li>员工编号:
                                                <el-input v-model="tableData[0].clerkId" placeholder="请输入内容"></el-input>
                                            </li>
                                            <li>姓名:
                                                <el-input v-model="tableData[0].clerkName" placeholder="请输入内容"></el-input>
                                            </li>
                                            <li>角色:<br/>
                                                <el-select v-model="value" placeholder="请选择">
                                                    <el-option
                                                            v-for="item in options"
                                                            :key="item.value"
                                                            :label="item.label"
                                                            :value="item.value">
                                                    </el-option>
                                                </el-select>
                                            </li>
                                            <li>员工年龄:
                                                <el-input v-model="tableData[0].clerkAge" placeholder="请输入内容"></el-input>
                                            </li>
                                            <li>性别:
                                                <el-input v-model="tableData[0].clerkSex" placeholder="请输入内容"></el-input>
                                            </li>
                                            <li>员工住址:
                                                <el-input v-model="tableData[0].clerkAddress" placeholder="请输入内容"></el-input>
                                            </li>
                                            <li>联系方式:
                                                <el-input v-model="tableData[0].clerkPhone" placeholder="请输入内容"></el-input>
                                            </li>
                                        </ul>

                                        <div slot="footer" class="dialog-footer">
                                            <el-button @click="dialogs = false">取 消</el-button>
                                            <el-button type="primary" @click="dialogs = false">确 定</el-button>
                                        </div>
                                    </el-dialog>
                                    <el-button
                                            size="mini"
                                            type="danger"
                                            @click="handleDelete(scope.$index, scope.row)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="权限管理">
                    <div>
                        <el-table
                                :data="tableData"
                                style="width: 100%">
                            <el-table-column
                                    prop="date"
                                    label="功能"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="初级"
                                    width="180">
                                <input type="checkbox"/>
                            </el-table-column>
                            <el-table-column
                                    prop="address"
                                    label="中级">
                                <input type="checkbox"/>
                            </el-table-column>
                            <el-table-column
                                    prop="address"
                                    label="高级">
                                <input type="checkbox"/>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="rigeth">
                        <el-button type="primary" plain>修改</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="角色管理">33</el-tab-pane>
                <el-tab-pane label="定时任务补偿">44</el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Yhguanli",
        data() {
            return {
                dialogTableVisible: false,
                dialogFormVisible: false,
                dialogs:false,
                staff: {
                    clerkAccountNumber: null,
                    clerkPassword: null,
                    clerkName: null,
                    roleId: null,
                    clerkAge: null,
                    clerkSex: null,
                    clerkAddress: null,
                    clerkPhone: null
                },
                formLabelWidth: '80px',
                tableData: [{
                    clerkId: '1',
                    clerkName: '王小虎',
                    clerkAddress: '上海市普陀区金沙江路',
                    roleId:'1',
                    clerkAge:'19',
                    clerkSex:'男',
                    clerkPhone:'12345678910'
                }],
                options:[{
                    value: '选项1',
                    label: '管理员'
                }],
                value: ""
            }
        },
        methods: {
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            }
        }
    }
</script>

<style scoped>

</style>